<!DOCTYPE html>
<html>

<head>

  <script src="../jspsych.js"></script>
  <script src="../plugins/jspsych-image-keyboard-response.js"></script>
  <script src="../plugins/jspsych-audio-keyboard-response.js"></script>
  <script src="../plugins/jspsych-html-keyboard-response.js"></script>
   <script src="../plugins/jspsych-survey-html-form.js"></script>
    <script src="../plugins/html-keyboard-no-response2.js"></script>
     <script src="../plugins/html-keyboard-no-response.js"></script>
  <link rel="stylesheet" href="../css/jspsych.css"></link>
  <style>
    img {
      width: 300px;
    }
  </style>
</head>

<body>
</body>
<script>
	
	// 洗牌算法
	function shuffle(arr){
	    let n = arr.length, random;
	    while(0!=n){
	        random =  (Math.random() * n--) >>> 0; // 无符号右移位运算符向下取整
	        [arr[n], arr[random]] = [arr[random], arr[n]] // ES6的结构赋值实现变量互换
	    }
	    return arr;
	}
	
	
	var testData = [];
	for(var i = 0;i<10;i++){
		if(i == 0 || i == 1){
			testData.push({
				//circle
				type:0
			})
		}else{
			testData.push({
				//money
				type:1
			})
		}

	}
	
	
	var extraData = []
	for(var i = 0;i<10;i++){
		extraData.push({
			//money
			type:1
		})
	}
	
	
	var prodData = [];
	for(var i = 0;i<60;i++){
		prodData.push({
			//money
			type:1
		})
	}
	for(var i = 0;i<30;i++){
		prodData.push({
			//circle
			type:0
		})
	}
	originData = shuffle(testData);
	console.log(originData)
	
	// 当前所有金额
	var money = 0;
	
	// flag1
	var f1 = true;
	
	// flag2 当前回答结果
	var f2 = true;
	
	var correct = true;
	
	var defaultWaitTime = 300;
	
	var nowTryTimes = 0;
	
	var isPressAdvice = false;
	
	var blockNum = 0;
	
	// rule 1 高成功率
	// rule 2 低成功率
	
	function r1(){
		
		
		if(nowTryTimes == 0 ){
			f1 = false;
			defaultWaitTime = 300;
		}else{
			
			if(f2){
				if(f1 == true && f2 == true){
					if(defaultWaitTime <= 30){
						return;
					}
					defaultWaitTime -= 30;
				}
			}else{
				defaultWaitTime += 30
			}
		}
		
		
	}
	
	function r2(){
		if(nowTryTimes == 0 ){
			defaultWaitTime = 300;
		}else{
			if(f2){
				if(defaultWaitTime <= 30){
					return;
				}
				defaultWaitTime -= 30;
			}else{
				if(f1 != true && f2 != true){
					defaultWaitTime += 30;
				}
			}
		}
	}
	
	
	// rule 
	// 1 金钱高
	// 2 金钱低
	// 3 社会高
	// 4 社会低
	
	
	var blockConfig = [
		{
			"img1":'<img src="img/test/f.png" >',
			"img0":'<img src="img/test/circle.png" >',
			"res1":'<img src="img/test/up.png" >',
			"res0":'<img src="img/test/down.png" >',
			"res2":'<img src="img/test/social0.png" >',
			"rule": 0,
			"times":10
		},{
			"img1":'<img src="img/test/f.png" >',
			"img0":'<img src="img/test/circle.png" >',
			"res1":'<img src="img/test/up.png" >',
			"res0":'<img src="img/test/down.png" >',
			"res2":'<img src="img/test/social0.png" >',
			"rule": 3,
			"times":45
		},{
			"img1":'<img src="img/test/f.png" >',
			"img0":'<img src="img/test/circle.png" >',
			"res1":'<img src="img/test/up.png" >',
			"res0":'<img src="img/test/down.png" >',
			"res2":'<img src="img/test/social0.png" >',
			"rule": 3,
			"times":45
		},{
			"img1":'<img src="img/test/f.png" >',
			"img0":'<img src="img/test/circle.png" >',
			"res1":'<img src="img/test/up.png" >',
			"res0":'<img src="img/test/down.png" >',
			"res2":'<img src="img/test/social0.png" >',
			"rule": 4,
			"times":45
		},{
			"img1":'<img src="img/test/f.png" >',
			"img0":'<img src="img/test/circle.png" >',
			"res1":'<img src="img/test/up.png" >',
			"res0":'<img src="img/test/down.png" >',
			"res2":'<img src="img/test/social0.png" >',
			"rule": 4,
			"times":45
		},{
			"img1":'<img src="img/test/f.png" >',
			"img0":'<img src="img/test/circle.png" >',
			"res1":'<img src="img/test/up.png" >',
			"res0":'<img src="img/test/up.png" >',
			"res2":'<img src="img/test/up.png" >',
			"rule": 5,
			"times":10
		},{
			"img1":'<img src="img/test/￥.png" >',
			"img0":'<img src="img/test/circle.png" >',
			"res1":'<img src="img/test/win.png" >',
			"res0":'<img src="img/test/loss.png" >',
			"res2":'<img src="img/test/money0.png" >',
			"rule": 0,
			"times":10
		},{
			"img1":'<img src="img/test/￥.png" >',
			"img0":'<img src="img/test/circle.png" >',
			"res1":'<img src="img/test/win.png" >',
			"res0":'<img src="img/test/loss.png" >',
			"res2":'<img src="img/test/money0.png" >',
			"rule": 1,
			"times":45
		},{
			"img1":'<img src="img/test/￥.png" >',
			"img0":'<img src="img/test/circle.png" >',
			"res1":'<img src="img/test/win.png" >',
			"res0":'<img src="img/test/loss.png" >',
			"res2":'<img src="img/test/money0.png" >',
			"rule": 1,
			"times":45
		},{
			"img1":'<img src="img/test/￥.png" >',
			"img0":'<img src="img/test/circle.png" >',
			"res1":'<img src="img/test/win.png" >',
			"res0":'<img src="img/test/loss.png" >',
			"res2":'<img src="img/test/money0.png" >',
			"rule": 2,
			"times":45
		},{
			"img1":'<img src="img/test/￥.png" >',
			"img0":'<img src="img/test/circle.png" >',
			"res1":'<img src="img/test/win.png" >',
			"res0":'<img src="img/test/loss.png" >',
			"res2":'<img src="img/test/money0.png" >',
			"rule": 2,
			"times":45
		}]
	
	
	
	function resetFlag(){
		money = 0;
		f1 = true;
		f2 = true;
		defaultWaitTime = 300;
		nowTryTimes = 0;
		isPressAdvice = false;
	}
	
	var guide1 = {
			type: 'html-keyboard-response',
			stimulus: '<img style="width:980px; height:650px" src="img/test/MID_GUIDE.png" >'
		}
		
		var guide2 = {
			type: 'html-keyboard-response',
			stimulus: '<img style="width:980px; height:650px" src="img/test/SID_GUIDE.png" >'
		}
		
		var guide = {
			type: 'html-keyboard-response',
			stimulus: '<p>MID任务指导语<br/>\
	1.首先屏幕中央会出现一个线索，如果您看到“￥”符号，\
	代表这个试次是金钱激励试次，如果您反应成功，会反馈给你绿色向上的箭头，意味您获得1元；否则反馈红色向下的箭头，意味您损失0.5元。如果您看到空白圆圈，代表这个试次中，无论你反应成功与否，都没有收益和损失。</br>\
	2.在线索之后会呈现一个“+”符号，您需要注视它。</br>\
	3.在“+”之后会出现一个黑色方框，要求您看到它就尽快按键盘“/”键。如果您在方框出现之前或者消失之后按键会判断为反应失败。</br>\
	4.在您做出反应之后，会短暂呈现一个“+”注视点。</br>\
	5.最后给出每个试次中，您行为反应的结果反馈。</br>\
	6.请按空格键进入练习试次，开始实验。</p>',
		}
		
		var rest = {
				type: 'html-keyboard-response',
				choices: [' '],
				stimulus: '<p>休息一下</p><p>按空格继续</p>',
		}
		
		var rest0 = {
				type: 'html-keyboard-response',
				choices: [' '],
				stimulus: '<p>正式试次</p><p>按空格继续</p>',
		}
		
		var tip = {
			type: 'html-keyboard-response',
			choices: [' '],
			stimulus: '<p>当前任务结束</p><p>按空格阅读下一个任务的指导语</p>',
		}
		
		var welcome = {
		  type: 'survey-html-form',
		  stimulus: '<p style="font-size: 60px;">高成功率金钱奖励测试</p>',
		  html: '<p> 姓名: <input name="name"  required="required"  type="text" /></p><p> 性别:<input type="radio" required="required"  name="sex" value="male">男<input type="radio" required="required"  name="sex" value="female">女</p><p> 年龄: <input name="age" required="required" type="number" /></p><p> 省: <input name="province" required="required" type="text" /></p><p> 专业: <input name="subject" required="required" type="text" /></p><p> 民族: <input name="nation" required="required" type="text" /></p><p> 宗教信仰: <input name="religion" required="required" type="text" /></p></p>'
		}
	
	var cue = {
		  type: 'html-keyboard-response',
		  choices: [],
		  stimulus: function(){
			  console.log(originData)
			  console.log(nowTryTimes)
			  if(originData[nowTryTimes].type == 1){
			  	return blockConfig[blockNum].img1;
			  }else{
			  	return blockConfig[blockNum].img0;
			  }
		  },
		  trial_duration: 400,
		  data: function(){
			  if(originData[nowTryTimes].type == 1){
				  correct = true;
			  	return {test_part: 'cue',correct:"press"}
			  }else{
				  correct = false;
			  	return {test_part: 'cue',correct:"no"}
			  }
		  }
		}
		
		
		
		var application = {
		  type: 'html-keyboard-no-response',
		  stimulus: '<div style="font-size:60px;">+</div>',
		  
		  trial_duration: function(){
			  var waitTime = Math.random()*500 + 2000;
			  console.log(waitTime)
		    return waitTime;
		  },
		  data: {test_part: 'application'},
		  on_finish: function(t) {
			  console.log(t)
			  console.log("检测提前按键")
			  console.log(t.key_press)
			  f1 = f2;
			  if(t.key_press != undefined){
				  isPressAdvice = true;
				  console.log("提前按了")
			  }
			}
		}
		
		var pressInSquare = false;
		
		var square = {
		  type: 'html-keyboard-response',
		  stimulus:function(){
			  return '<img src="img/test/square.jpg" >';
		  },
		  data: function(){
			  return {test_part: 'target',duration: defaultWaitTime}
			},
		  trial_duration: function(){
				
			  	
			  	console.log("waitTime" + defaultWaitTime)
			  	
			  	return defaultWaitTime;
		  },
	on_finish: function(data) {
		console.log("方框结束")
				localStorage.setItem("flag",'1');
				localStorage.setItem("pressTime",new Date().getTime());
				  console.log(data.key_press)
				  if (data.key_press == 191) {
						f2 = true;
				  }else{
					f2 = false;
				  }
				  console.log("f2" +f2)
				  console.log(this)
		  },
		}
		
		var fixation = {
		  type: 'html-keyboard-no-response2',
		  stimulus: '<div style="font-size:60px;">+</div>',
		  trial_duration: 1300,
		  data:function(){
			  return {test_part: 'fixation',
			  isPressAdvice: isPressAdvice,
			  pressInSquare:pressInSquare}
		  } ,
		  on_finish: function(data) {
			  console.log(data.key_press)
			  if(isPressAdvice){
				  isPressAdvice = false;
			  }
			 
			
			console.log("f2" +f2)
			console.log(this)
		  }
		}
		
		var feedback = {
			type: 'html-keyboard-response',
			choices: [166],
			stimulus: function(){
				console.log("blockNum"+blockNum)
				nowTryTimes++;
				if(!correct){
					return blockConfig[blockNum].res2
				}else{
					if(f2){
						money += 0.5;
						return blockConfig[blockNum].res1
					}else{
						money -= 0.5
						return blockConfig[blockNum].res0
					}
				}
			},
			trial_duration: 2000,
			data:function(){
				return {test_part: 'feedback',
				result:f2,
				rule:blockConfig[blockNum].rule,
				second_duration:localStorage.getItem("duration")}
			}
		}
		
		
		var blockRepeat = 0;
		var iti = {
			type: 'html-keyboard-response',
			stimulus: '<div style="font-size:60px;"></div>',
			choices: jsPsych.NO_KEYS,
			trial_duration: 1000,
			data: {test_part: 'iti'},
			on_finish: function(data){
				
			
				localStorage.clear(); 
				
				console.log("itiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii")
				if(blockRepeat < this.reptatTimes-1){
					blockRepeat = blockRepeat+1;
					console.log("repeat计数itiiiiiiiiiiiii")
				}else{
					
					if(blockNum == 0 || blockNum == 2 || blockNum == 4 || blockNum == 5 || blockNum == 6 || blockNum == 8 || blockNum == 10){
						console.log("resetttttttttttttttttttttt")
						resetFlag();
						console.log(nowTryTimes)
						
					if(blockNum == 4 || blockNum == 5){
							if(blockNum == 5){
								originData = shuffle(testData)
							}
							
							if(blockNum == 4){
								originData = extraData;
							}
						}else{
							console.log(prodData)
							originData = []
							var tmp = shuffle(prodData)
							for(var i = 0;i<tmp.length;i++){
								originData.push(tmp[i])
							}
							console.log(blockNum)
							console.log(blockConfig)
						}
					}
					console.log("blockNum+++++++++++++")
					console.log("blockNum"+i)
					blockNum ++;
					blockRepeat=0;
				}
				
				if(blockNum<blockConfig.length && (blockConfig[blockNum].rule == 0 || blockConfig[blockNum].rule == 1 || blockConfig[blockNum].rule == 3)){
					r1();
				}else{
					r2();
				}
			}
		}
		
		
		// var block = {
		// 	type: 'html-keyboard-response',
		// 	timeline: [
		// 	  cue,application,square,fixation,feedback,iti
		// 	],
		// 	randomize_order: false,
		// 	repetitions:blockConfig[blockNum].times,
	
		// 	reptatTimes:blockConfig[blockNum].times,
		// 	on_finish: function() {
		// 		if(blockRepeat < this.reptatTimes){
		// 			blockRepeat = blockRepeat+0.5;
		// 			console.log("repeat计数")
		// 		}else{
		// 			console.log("blockNum"+blockNum)
		// 			blockNum ++;
		// 			blockRepeat=0;
		// 		}
		// 	}
		// }
		
		// var block2 = {
		// 	type: 'html-keyboard-response',
		// 	timeline: [
		// 	  cue,application,square,fixation,feedback,iti
		// 	],
		// 	randomize_order: false,
		// 	repetitions:blockConfig[blockNum].times,
		
		// 	reptatTimes:blockConfig[blockNum].times,
		// 	on_finish: function() {
		// 		if(blockRepeat < this.reptatTimes){
		// 			blockRepeat = blockRepeat+0.5;
		// 			console.log("repeat计数")
		// 		}else{
		// 			console.log("blockNum"+blockNum)
		// 			blockNum ++;
		// 			blockRepeat=0;
		// 		}
		// 	}
		// }
		
		var blocks = []
		for(var i = 0;i<blockConfig.length;i++){
			blocks.push({
			type: 'html-keyboard-response',
			timeline: [
			  cue,application,square,fixation,feedback,iti
			],
			randomize_order: false,
			repetitions:blockConfig[i].times,
			blockIndex:i,
			reptatTimes:blockConfig[i].times,
			on_finish: function() {
				// if(blockRepeat < this.reptatTimes){
				// 	blockRepeat = blockRepeat+0.5;
				// 	console.log("repeat计数")
				// }else{
				// 	console.log("blockNum"+i)
				// 	blockNum ++;
				// 	blockRepeat=0;
				// 	if(this.blockIndex%2 == 0){
				// 		resetFlag();
				// 		originData = shuffle(prodData)
				// 	}
				// }
			}
			})
		}
	

    /* start the experiment */
    jsPsych.init({
		 timeline: [welcome,guide2,blocks[0],rest0,blocks[1],rest,blocks[2],rest,blocks[3],rest,blocks[4],blocks[5],tip,guide1,blocks[6],rest0,blocks[7],rest,blocks[7],rest,blocks[9],rest,blocks[10]],
      // timeline: [welcome,guide1,blocks[0],rest0,blocks[1],rest,blocks[2],rest,blocks[3],rest,blocks[4]],
	  on_finish: function() {
	    jsPsych.data.displayData();
		jsPsych.data.get().localSave('csv','mydata.csv');
		console.log(jsPsych.data)
		console.log(jsPsych.data.getInteractionData().values())
		console.log(this.timeline)
	  },
    });
 
  
</script>

</html>
